import React from 'react'
import { Avatar, Input, Button } from 'antd-mobile'
import { 
  SendOutline,
  AudioOutline,
  SmileOutline,
  FileOutline,
  VideoOutline,
  PlayOutline,
  StopOutline
} from 'antd-mobile-icons'
import style from './chat.module.css'

function Index() {
  // 仅用于展示布局的静态示例数据（不含功能）
  const messages = [
    {
      id: 1,
      type: 'text',
      content: '你好！这里是客服小助手~',
      sender: 'other',
      timestamp: '刚刚',
      avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=50&h=50&fit=crop&crop=face'
    },
    {
      id: 2,
      type: 'text',
      content: '我想咨询一下就诊流程～',
      sender: 'me',
      timestamp: '1 分钟前',
      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face'
    },
    {
      id: 3,
      type: 'audio',
      duration: 12,
      sender: 'me',
      timestamp: '1 分钟前',
      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face'
    },
    {
      id: 4,
      type: 'file',
      fileName: '门诊须知.pdf',
      fileSize: '1.2 MB',
      sender: 'other',
      timestamp: '2 分钟前',
      avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=50&h=50&fit=crop&crop=face'
    },
    {
      id: 5,
      type: 'video',
      fileName: '就诊指引.mp4',
      fileSize: '3.8 MB',
      sender: 'other',
      timestamp: '2 分钟前',
      avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=50&h=50&fit=crop&crop=face'
    }
  ]

  const renderMessage = (m) => {
    if (m.type === 'text') {
      return <div className={style.messageText}>{m.content}</div>
    }
    if (m.type === 'audio') {
      return (
        <div className={style.audioMessage}>
          <Button className={style.playButton}><PlayOutline /></Button>
          <div className={style.audioDuration}>{m.duration}s</div>
        </div>
      )
    }
    if (m.type === 'file') {
      return (
        <div className={style.fileMessage}>
          <FileOutline className={style.fileIcon} />
          <div className={style.fileInfo}>
            <div className={style.fileName}>{m.fileName}</div>
            <div className={style.fileSize}>{m.fileSize}</div>
          </div>
        </div>
      )
    }
    if (m.type === 'video') {
      return (
        <div className={style.videoMessage}>
          <div className={style.videoInfo}>
            <div className={style.fileName}>{m.fileName}</div>
            <div className={style.fileSize}>{m.fileSize}</div>
          </div>
        </div>
      )
    }
    return null
  }

  return (
    <div className={style.chatContainer}>
      {/* 顶部 */}
      <div className={style.chatHeader}>
        <div className={style.headerInfo}>
          <Avatar src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face" />
          <div className={style.userInfo}>
            <div className={style.userName}>客服小助手</div>
            <div className={style.userStatus}>在线</div>
          </div>
        </div>
      </div>

      {/* 消息列表（静态示例） */}
      <div className={style.messagesContainer}>
        {messages.map((m) => (
          <div
            key={m.id}
            className={`${style.messageItem} ${m.sender === 'me' ? style.myMessage : style.otherMessage}`}
          >
            <Avatar src={m.avatar} className={style.messageAvatar} />
            <div className={style.messageContent}>
              {renderMessage(m)}
              <div className={style.messageTime}>{m.timestamp}</div>
            </div>
          </div>
        ))}
      </div>

      {/* 底部工具栏（仅布局，不带交互） */}
      <div className={style.inputArea}>
        <Button className={style.recordButton}>
          <AudioOutline />
        </Button>
        <Input className={style.textInput} placeholder="输入消息...（仅布局示意）" disabled />
        <Button className={style.emojiButton}>
          <SmileOutline />
        </Button>
        <Button className={style.fileButton}>
          <FileOutline />
        </Button>
        <Button className={style.fileButton}>
          <VideoOutline />
        </Button>
        <Button className={style.sendButton} disabled>
          <SendOutline />
        </Button>
      </div>
    </div>
  )
}

export default Index
